<template>
  <div class="base-form">
    <div class="model-title">1、填写申请信息</div>
    <el-form ref="apply-form" :model="form" class="size-auto width-100 form" :rules="rules" size="medium" label-width="130px">
      <el-form-item label="申请单位" prop="name">
        {{ info.contractorName }}
      </el-form-item>
      <el-form-item label="项目名称" prop="name">
       {{ info.name }}
      </el-form-item>
      <el-form-item label="所属公路" prop="name">
        <span>
            {{ info.highwayName }}
        </span>
      </el-form-item>
      <el-form-item label="计量期数" prop="name">
       {{ info.periodNumber }}
      </el-form-item>
      <el-form-item label="计量周期" prop="cycle">
        <el-date-picker
            v-model="form.cycle"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            style="width: 40%;"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="其他说明" prop="applicationInstructions">
        <el-input v-model.trim="form.applicationInstructions" maxlength="200" show-word-limit type="textarea" rows="3"></el-input>
      </el-form-item>
      <el-form-item label="附件资料" prop="attachment">
        <FileUpload ref="fileUpload" :list="form.attachment" @load="handleLoad" />
      </el-form-item>
      <el-form-item label="电子签名" prop="esingnature">
        <Signature :applicant-signature.sync="form.applicantSignature"></Signature>
      </el-form-item>
    </el-form>
    <div class="btn">
      <BaseButton :disabled="submitDisabled" type="second" @click="handleSave(true)">保存</BaseButton>
      <BaseButton :disabled="submitDisabled" @click="handleNext">下一步</BaseButton>
    </div>
  </div>
</template>
<script>
import { ProjectLedgerModel } from '@/models'

export default {
    props: {
        // 申请ID
        id: {
            type: [Number, String],
            default: ''
        },
        curStep: {
            type: [Number],
            required: true
        },
        info: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            form: {
                id: null,
                projectId: '',
                cycleStartDate: '',
                cycleEndDate: '',
                cycle: [],
                applicationInstructions: '',
                attachment: [], // 附件
                applicantSignature: '',
            },
            rules: {
                cycle: [
                    { required: true, message: '请选择计量周期', trigger: 'change' },
                ]
            },
            submitDisabled: false,
            model: new ProjectLedgerModel()
        }
    },
    watch: {
        info: {
            immediate: true,
            handler(val) {
                if (val) {
                    this.form.projectId = this.info.projectId
                }
            }
        },
        id: {
            immediate: true,
            handler(val) {
                if (val) {
                    this.form.id = val
                }
            }
        },
        'form.cycle': {
            immediate: true, 
            deep: true,
            handler(val) {
                if (val && val.length) {
                    this.form.cycleStartDate = val[0]
                    this.form.cycleEndDate = val[1]
                } else {
                    this.form.cycleStartDate = ''
                    this.form.cycleEndDate = ''
                }
            }
        }
    },
    methods: {
        handleLoad(value) {
            this.submitDisabled = value
        },
        // 暂存
        handleSave(isbtn) {
            return new Promise((resolve, reject) => {
                this.$refs['apply-form'].validate((valid) => {
                    if (valid) {
                        const data = {
                            ...this.form
                        }
                        const attachment = JSON.stringify(this.$refs['fileUpload'].getFileList())
                        data.attachment = attachment
                        delete data.cycle
                        this.model.applicationSave(data).then(res => {
                            this.form.id = res.id
                            resolve(res.id)
                            if (isbtn) {
                                this.$message({
                                    type: 'success',
                                    message: '计量申请草稿保存成功!',
                                })
                            }
                        }).catch(() => {
                            reject()
                        })
                    } else {
                        reject()
                    }
                })   
            })
        },
        // 下一步
        handleNext() {
            this.handleSave().then(id => {
                this.$emit('next', id)
            })
        },
        // 重置表单
        resetFrom() {
            this.$refs['apply-form'].resetFields()
            this.$refs['apply-form'].clearValidate()
        },
        // 周期变化 ，同理类型变化
        cycleChange() {
            this.$emit('sycleChange')
        },
    }
}
</script>
<style scoped lang="scss">
.base-form{
  height:  calc(100% - 90px);
  width: 100%;
  margin: 24px 0px;
  box-shadow: 0px 0px 4px 0px rgba(131, 145, 178, 0.2);
  position: relative;
  overflow-y: auto;
  .form{
    width: 50%;
  }
  .model-title{
    width: 100%;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(131, 145, 178, 0.1);
  }
  .btn{
    width: 100%;
    display: flex;
    justify-content: center;
    // position: absolute;
    margin-bottom: 24px;
  }
}

</style>
